
<!DOCTYPE html>
<html>
<head>


<style>

html {
    /*	background:url('background.jpg') no-repeat center center; */
    background: blue;
	background-size:cover;
}

/* HTML5 display-role reset for older browsers */

body{
  padding-top:10px;
}


#buffer {
  margin-top: 30px;
  background:blue; 
}

pre {
   
    white-space: normal;
    word-wrap: break-word;
    color: white;
    background:blue;
}

.myHeader {
    border-bottom:1px solid #eb7429; 
    background:blue; 
    color: white;
    padding:10px 20px; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:2000; 
    width:100%;	
    height: 220px;
    
}


#goesontop {
  width: 100%;
}

#goesinmiddle {
  width: 100%;
  vertical-align: middle;
  text-align: center;

}

#goesunderneath {
  color: white;
  vertical-align: middle;
  text-align: center;
  margin-bottom: 20px;
}


#containpre {

}

.big-button {
  width: 230px;
  height: 50px;
  margin: 20px;
  font-size: 22px;
  text-align: center;
  vertical-align: middle;
  top:80%;
  color: white;
  background-color: blue;
  border: 0;
}

.mid-button {
  width: 230px;
  height: 25px;
  margin: 10px;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
  top:80%;
  color: white;
  background-color: blue;
  border: 0;
}

#marker {
  color: white;
  background-color: blue;
  border: 0;
}

#goal {
  color: black;
  background-color: blue;
  border: 0;
}

#output {
  font-size: 40px;
  margin-bottom: 20px;
}


footer {
   background-color: blue;
   width: 100%;
   bottom: 0;
	 font-size: 8;
	 color: #f4a460;
   position: fixed;
	 height: 10%;
 }

#manageSpeed {
  color: white;
}

#manageSpeedLeft {
float: left;
width: 35%;
text-align: center;
  vertical-align: middle;
}

#manageSpeedCenter {
display: inline-block;
margin: 0 auto;
padding-top: 10px;
width: 30%;
text-align: center;
vertical-align: middle;
}

#manageSpeedRight {
float: right;
width: 35%;
text-align: center;
  vertical-align: middle;
}

#message {
 text-align: center;
 color: grey;
 vertical-align: middle;
 height: 5%;
}
</style>



</head>


<header class = "myHeader">

 	 	<div id="goesontop">
			  <div><button onclick="showDirections()">Directions</button></div>
			  <div id="buffer"><div>
			  <div><input type="file" id="filechoice" ></input></div>
  		</div>

  		<div id="goesinmiddle">
		    <input onclick="doStuff()" type="button" value="Start Scrolling" id="button1" class="big-button"></input>
			  <input id = "marker" name = "marker" value = "0"></input>
			  <input id = "goal" name = "goal" value = ""></input>
  		</div>

  		<div id="goesunderneath" >
 			  <label id = "output" >Welcome to Interval</label> 
  		</div> 

</header>

<body>

	<div id="buffer"><div>

	<div  id="containpre"><pre id="contents"  ></pre>
	</div>
	</div> 
    
<footer>
	<div id="manageSpeed">
	  <div id="manageSpeedLeft" class="btn" ><button type="button" onclick="decreaseSpeed()" class = "mid-button" value = "Decrease Speed" id = "DecreaseSpeed">Decrease Speed</button>
        </div>
	  <div id="manageSpeedCenter">
        </div>
	  <div id="manageSpeedRight" class="btn"><button type="button" onclick="increaseSpeed()" class = "mid-button" value = "Increase Speed" id = "IncreaseSpeed">Increase Speed</button>
        </div> 
	</div>
	<div id="message">
    <p>Made for readers by John Gillespie</p>
  </div>
</footer>

<script>

	var readSpeed = 500;

	var stringPosition = document.getElementById('marker').value;

	function showDirections() {
		alert("Choose text (.txt) files only when using Interval! Train in short bursts of 750 - 1000 words to increase your natural reading-speed. Start Scrolling to  speed-read. Increase Speed to make yourself read faster. Decrease Speed to slow down. Stop Scrolling if you need to stop and just read the text. Start Scrolling again, or change the word index any time.");
	}


	function doStuff() {
	
		var scrollbutton = document.getElementById("button1").value;
		if(scrollbutton === "Start Scrolling"){
			document.getElementById("button1").value= "Stop Scrolling";
			stringPosition = document.getElementById('marker').value;
			pageScroll();
			delayedLoop();
		}
		else{
			document.getElementById("button1").value= "Start Scrolling";
			cancelTimeoutOnClick();
	    	}
	}

	function pageScroll() {
       	 	window.scrollBy(0,50); // horizontal vertical scroll increments
       	 	scrolldelay = setTimeout('pageScroll()',readSpeed*60); // scroll every n milliseconds	
	}

	function decreaseSpeed() {										// decreasing speed
		readSpeed = readSpeed + 50;
	}

	function increaseSpeed() {										// increasing speed
		readSpeed = readSpeed - 50;
	}

	function cancelTimeoutOnClick() {
    		if (scrolldelay) {
        		clearTimeout(scrolldelay); //connects to pageScroll()
			clearTimeout(JohnsVar); //connects to delayedLoop()
        		timerHandle = 0;
    		}
	}
 
	var data_array=[];

	function readSingleFile(evt) 
	{
		var f = evt.target.files[0];   	
		if (f) { 
      			var r = new FileReader();  
      			r.onload = function(e) { 
	    			  var contents = e.target.result;
				document.getElementById('contents').textContent = this.result;
				var tempstring = this.result;
				data_array = tempstring.split(' ');
        			alert( "Import successful!" );
				document.getElementById('goal').value = "/ " +data_array.length;  
      				}
			r.readAsText(f);

			}
		else 
		{ 
      			alert("Failed to load file");
    		}
  	}

	document.getElementById('filechoice').addEventListener('change', readSingleFile, false);

	var JohnsVar;

	function delayedLoop()
		{	
					
			document.getElementById('output').innerHTML = "";
			document.getElementById('output').innerHTML = data_array[stringPosition];
			document.getElementById('marker').value = stringPosition;
			if(++stringPosition == data_array.length)
				{
					return;
				}
			JohnsVar = setTimeout('delayedLoop()',readSpeed);	
		}

</script>
	
</body>